<template>
    <div class="main">
        <ul class="menus">
            <li>
                <a href="">
                    <div class="menus-left-text">
                        抢券
                        <p class="menus-tips">李白乘舟将欲行</p>
                    </div>
                    <div class="menus-right-icon">
                        <img src="../../assets/images/quan.png"/>
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="menus-left-text">
                        轻松时刻
                        <p class="menus-tips">闺中少妇不知愁</p>
                    </div>
                    <div class="menus-right-icon">
                        <img src="../../assets/images/game.png" />
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="menus-left-text">
                        私人订制
                        <p class="menus-tips"></p>
                    </div>
                    <div class="menus-right-icon">
                        <img src="../../assets/images/siren.png" />
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="menus-left-text">
                        个人空间
                        <p class="menus-tips"></p>
                    </div>
                    <div class="menus-right-icon">
                        <img src="../../assets/images/kongj.png" />
                    </div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="menus-left-text">
                        关于我们
                        <p class="menus-tips">一片冰心在玉壶</p>
                    </div>
                    <div class="menus-right-icon">
                        <img src="../../assets/images/wom.png" />
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>

</script>

<style lang="scss">
    .main {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../../assets/images/bg.jpg") no-repeat;
        background-size: 100% 100%;
        ul.menus {
            position: relative;
            display: block;
            width: 100%;
            margin-top:2rem;
            li {
                position: absolute;
                overflow: hidden;
                .menus-left-text {
                    color: #fff;
                    float: left;
                    font-size: .8rem;
                    font-weight: bold;
                }
                .menus-right-icon {
                    float: left;
                    display: inline-block;
                    width: 2.5rem;
                    height: 2.5rem;
                    line-height: 3rem;
                    border: 2px solid #fff;
                    border-radius: 1.25rem;
                    text-align: center;
                    margin-left: .2rem;
                    img {
                        width: 1.5rem;
                        height: 1.5rem;
                    }
                }
                .menus-tips {
                    color: #e6e6e6;
                    font-size: .7rem;
                }
                &:nth-child(1) {
                    top: 2rem;
                    right: 2rem;
                }
                &:nth-child(2) {
                    top: 5rem;
                    right: 6.5rem;
                }
                &:nth-child(3) {
                    top: 9.5rem;
                    right: 8.1rem;
                }
                &:nth-child(4) {
                    top: 14rem;
                    right: 6.8rem;
                }
                &:nth-child(5) {
                    top: 17.3rem;
                    right: 2rem;
                }
            }
        }
    }
</style>
